<template>
    <div class="banner-add">
        <el-row class="change-types">
            <el-radio-group v-model="type" size="medium" @change="resetHandler('uploadForm')">
                <el-radio-button label="online" ></el-radio-button>
                <el-radio-button label="local"></el-radio-button>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-form class="uploadForm" ref="uploadForm" :model="uploadParams" labelWidth="auto">
                <template v-if="type=='online'">
                    <el-form-item label="在线图片:" prop="img" :rules="[{required:true,message:'请输入在线地址',trigger:'blur'}]">
                            <el-input v-model="uploadParams.img" ></el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="本地图片:" prop="img" :rules="[{required:true,message:'请输入在线地址',trigger:'blur'}]">
                            <!-- :file-list="fileList" -->
                        <el-upload
                            class="upload-demo"
                            ref="uploadImg"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :auto-upload="false"
                            :limit="1"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-change="handlerChange"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </template>
                <el-form-item label="提示信息:" prop="alt" :rules="[{required:true,message:'请输入提示信息',trigger:'blur'}]">
                    <el-input v-model="uploadParams.alt" ></el-input>
                </el-form-item>
                <el-form-item label="链接地址:" prop="link" :rules="[{required:true,message:'请输入链接地址',trigger:'blur'}]">
                    <el-input v-model="uploadParams.link" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitHandler('uploadForm')">提交</el-button>
                    <el-button type="primary" @click="resetHandler('uploadForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import { addBannerAPI } from '@/api/banner';
    import imgToBase64 from "@/utils/imgToBase64"
    export default {
        name:"BannerAddView",
        data(){
            return {
                type:'online',
                fileList:[],
                uploadParams:{
                    img:"",
                    alt:"1111",
                    link:"https://www.baidu.com",
                }
            }
        },
        methods:{
            submitHandler(formName){
                this.$refs[formName].validate(async (bool)=>{
                    console.log("bool",bool);
                    if(bool){
                        try {
                            var res = await addBannerAPI(this.uploadParams);
                            console.log("图片上传成功",res);
                            this.$message.success("图片上传成功")
                            this.$refs[formName].resetFields()
                        }catch(err){
                            this.$message.err(err.message);
                        }
                    }

                })
            },
            resetHandler(formName){
                this.$refs[formName].resetFields()
                if(this.$refs.uploadImg){
                    this.$refs.uploadImg.clearFiles();
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log("图片预览",file);
            },
            handlerChange(file){
                // file文件对象 => 存储着文件相关的信息
                // file.raw => 图片数据 不能直接上传 => 需要处理问base64
                console.log("图片更改",file);
                console.log("图片更改fileList",this.fileList);

                // var fr = new FileReader();
                // fr.readAsDataURL(file.raw);
                // fr.onload = function(){
                //     console.log("成功",this.result);
                // }
                // fr.onerror = function(){
                //     console.log("失败");
                // }

                imgToBase64(file.raw).then((data)=>{
                    this.uploadParams.img = data;
                })
            }
            
        }
    }
</script>

<style lang="scss" scoped>
    .change-types{
        margin-bottom: 20px;
    }
    .uploadForm{
        width: 800px;
    }
</style>